<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>分类</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script>
		<script type="text/javascript" src="js/madieer.js"></script>
	</head>
	<body>
		<div id="cate-app" v-cloak>
			<header-app></header-app>
			<div class="t1-a1">
				<div class="t1-a2 i100 wow fadeInUp" data-wow-delay="0.3s"><img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220727/5d9ecea45467d2718d71ff37f12d7df1.jpg"></div>
				<div class="t1-a3 wow fadeInUp" data-wow-delay="0.4s">产品系列</div>
				<div class="t1-a4 wow fadeInUp" data-wow-delay="0.5s">中华老字号马迭尔冰棍</div>
			</div>
			<div class="ind6-a1" style="padding-bottom: 100px;">
				<div class="ind6-a2 wow fadeInUp" data-wow-delay="0.3s">
					<div class="swiper-container ind611">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item, index) in goodsCateList">
								<a>
									<div class="ind6-b1 a1" :style="'background: ' + cateColor[index] + ';'">
										<div class="ind6-b2">{{ item.title }}</div>
										<div class="ind6-b3">{{ item.sTitle }}</div>
										<div class="ind6-b4">
											<img :src="item.image_intro" />
										</div>
										<div class="ind6-b5 i100">
											<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/b4636008d4234b522cead7857672ce2b.jpg"></div>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-button-prev ind612 ind614">
					<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/fba1f3074fce591a2274c5062df5bc87.jpg">
					<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/1a3daf29e690bd6c9262a7e11d7fdb54.jpg">
				</div>
				<div class="swiper-button-next ind613 ind614">
					<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/5afb0eec8f2b77f3bece5a8d5fd374f4.jpg">
					<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220729/a24496fe5b8a9974b3acb06a62acbfeb.jpg">
				</div>
			</div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					let goodsCateList = Vue.ref([])  // 产品分类列表
					const cateColor = ['#f0dbb7', '#03594b', '#842125', '#7a654e', '#004c39']
					// 获取产品系列
					const getGoodsCateList = () => {
						requestData('category', {
							type: 'goods',
							data_type: 'list',
							category_id: '635353fa16cdb1829c047d07'
						},function(res) {
							console.log(res);
							goodsCateList.value = res
						})
					}
					Vue.onBeforeMount(() => {
						getGoodsCateList()
					})
					// DOM挂载完毕
					Vue.onMounted(() => {
						
					})
					// 监听事件   监听goodsCateList
					Vue.watch(goodsCateList, () => {
						Vue.nextTick(() => {
							// 元素渲染完成执行swiper初始化
							if ($(window).width() < 1024) {
								super21('ind611', 'ind612', 'ind613', 2, 1, 5000, 800);
							} else {
								super21('ind611', 'ind612', 'ind613', 4, 1, 5000, 800);
							}		
						})
					})
					return { goodsCateList, cateColor }
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#cate-app')
		</script>
	</body>
</html>
